<template>
    <el-table :data="article" border style="width: 100%;" :cell-style="{ height: '65px' }" v-loading="loading">
        <el-table-column label="封面" width="250">
            <template #default="scope">
                <img :src="scope.row.face" style="width: 100%;max-height: 200px;" />
            </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="time" label="上传时间" width="180" />
        <el-table-column prop="author" label="作者" width="100" />
        <el-table-column prop="tag" label="标签" width="100" />
        <el-table-column prop="state" label="状态" width="180" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" @click="preview(scope.row)" style="margin-right: 20px;">预览</el-button>
                <el-button type="primary" @click="start(scope.row)">修改状态</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="文字审核" width="30%" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <div>
            <el-select v-model="state" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in list" :key="item" :label="item" :value="item" />
            </el-select>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false, save()">
                    确定
                </el-button>
                <el-button @click="dialogVisible = false, state = ''">取消</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="previewVisible" title="预览" width="80%" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <div v-html="prop.content">

        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="previewVisible = false">
                    收起
                </el-button>
            </span>
        </template>
    </el-dialog>
    <pageComponents2Class @pageChange="handlePageChange" @siezsChange="handleSizesChange" :max=length
        style="margin: 10px 0px;" />
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import pageComponents2Class from '@/components/global/pageComponents2Class.vue';
export default {
    name: "checkArticle",
    components: {
        pageComponents2Class,
    },
    setup() {
        const store = useStore();
        let article = ref([]);
        let dialogVisible = ref(false);
        let previewVisible = ref(false);
        let list = ['通过', '不通过'];
        let state = ref();

        let nowPage = ref(1);
        let nowSizes = ref(10);
        let length = ref('');
        let loading = ref(true);

        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/check/showAllArticleByState/",
                headers: {
                    "satoken": store.state.admin.token,
                },
                data: {
                    page: nowPage.value,
                    sizes: nowSizes.value,
                    state: "待审核",
                },
                success(resp) {
                    loading.value = false;
                    article.value = resp.article;
                    length.value = resp.length;

                }
            });
        }
        getInfo();
        let prop = ref('');
        let start = (t) => {
            prop.value = t;
            if (prop.value.author == store.state.admin.adminName) {
                
                const open4 = () => {
                    ElMessage.error('不能审核自己发布的文章');
                }
                open4();
                return;
            }
            
            state.value = prop.value.state;
            dialogVisible.value = true;

        }
        let preview = (t) => {
            prop.value = t;
            previewVisible.value = true;
        }
        let save = () => {
            if (prop.value.state == state.value) {
                const open4 = () => {
                    ElMessage.error('未修改')
                }
                open4();
                return;
            }
            $.ajax({//更改审核系统数据库内容
                type: "post",
                url: "http://124.221.73.180:3001/checkArticle/",
                headers: {
                    "satoken": store.state.admin.token,
                },
                data: {
                    state: state.value,
                    id: prop.value.id,
                },
                success() {
                    getInfo();
                }
            });

            if (state.value == "通过") {
                prop.value.state = "通过";
                $.ajax({//更改主系统数据库内容
                    type: "post",
                    url: "http://124.221.73.180:3001/article/addNew/",
                    headers: {
                        "satoken": store.state.admin.token,
                    },
                    data: {
                        article: JSON.stringify(prop.value),
                    },
                    success(resp) {
                        if (prop.value.tag == "红色景点") {
                            $.ajax({//更改主系统数据库内容
                                type: "post",
                                url: "http://124.221.73.180:3001/address/add/",
                                headers: {
                                    "satoken": store.state.admin.token,
                                },
                                data: {
                                    address: prop.value.address,
                                    aid: resp,
                                },
                                success() {

                                }
                            });
                        }
                    }
                });
            } else {
                $.ajax({//不通过，删除主系统数据库内容
                    type: "post",
                    url: "http://124.221.73.180:3001/article/deteleByTime/",
                    headers: {
                        "satoken": store.state.admin.token,
                    },
                    data: {
                        time: prop.value.time,
                    },
                    success() {

                    }
                });
            }
            state.value = '';
        }
        let handlePageChange = (t) => {
            nowPage.value = t;
            getInfo();
        }
        let handleSizesChange = (sizes) => {
            nowSizes.value = sizes;
            getInfo();
        }

        return {
            save,
            getInfo,
            start,
            preview,

            handlePageChange,
            handleSizesChange,
            nowPage,
            length,
            nowSizes,

            loading,

            prop,
            list,
            state,
            article,
            dialogVisible,
            previewVisible,
        }
    }
}

</script>

<style scoped></style>